import * as React from "react";
import { RouteComponentProps, Link, withRouter } from "react-router-dom";
import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore, { Pagination } from "swiper";
import { ISku } from "../../types";
import style from "./style.less";
import * as api from "../../services/api";
import Toast from "../../components/Toast";
import "swiper/swiper-bundle.min.css";

SwiperCore.use([Pagination]);

interface Params {
  id: string;
}

interface State {
  data: ISku;
}

type Props = RouteComponentProps<Params>;

class Detail extends React.Component<Props, State> {
  state: State = {
    data: null,
  };

  /**
   *获取数据函数
   *1.调用api获取商品详细信息
   *2.判断result的stat属性判断是否成功获得数据
   *     OK，那么说明成功获取数据
   *3.更新状态
   */
  async getData() {
    let result = await api.getSku(this.props.match.params.id);
    if (result.stat === "OK") {
      this.setState({
        data: result.data,
      });
    }
  }

  /**
   * 返回历史页面
   */
  back() {
    this.props.history.goBack();
  }

  /* 
  1、检查登陆状态
  2、未登录则返回登录界面
  3、已登录就可以成功添加商品 
  */
  async add() {
    let result = await api.addCart(this.state.data.id);
    if (result.stat === "OK") {
      Toast.show("已加入购物车");
    } else {
      this.props.history.push("/login");
      Toast.show("请先登录");
    }
  }

  componentDidMount() {
    this.getData();
  }

  render() {
    if (this.state.data === null) return null;
    return (
      <div className={style.page}>
        <main className={style.swiper}>
          <div className={style.swiper_back}>
            <i
              className="iconfont icon-back"
              onClick={this.back.bind(this)}
            ></i>
          </div>
          <Swiper
            className={style.swiperWrap}
            pagination={{ bulletActiveClass: style.activePage }}
          >
            {this.state.data.gallery.map((item, index) => {
              return (
                <SwiperSlide key={index}>
                  <img className={style.swiperImg} src={item} />
                </SwiperSlide>
              );
            })}
          </Swiper>
          <div className={style.product}>
            <div className={style.product_price}>
              ￥{this.state.data?.price}
            </div>
            <div className={style.product_stock}>
              库存：{this.state.data?.stock}
            </div>
            <div className={style.product_title}>{this.state.data?.title}</div>
          </div>
          <div className={style.product_detail}>
            {this.state.data.detail.map((item, index) => {
              return <img key={index} src={item} />;
            })}
          </div>
        </main>
        <div className={style.footer}>
          <Link className={style.link} to="/Shopcar">
            <i className="iconfont icon-cart"></i>
            <span>购物车</span>
          </Link>
          <button className={style.addcart} onClick={this.add.bind(this)}>
            加入购物车
          </button>
        </div>
      </div>
    );
  }
}

export default withRouter(Detail);
